<%--
  Created by IntelliJ IDEA.
  User: mr.chan
  Date: 2022/4/30
  Time: 上午10:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>添加用户</title>

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
<%--    二、异步请求--%>
    <script type="text/javascript">
        $(function(){
            $("#frm").submit(function(){
                alert($("#frm").serialize());
                /* alert(11); */
                $.ajax({
                    url:'${pageContext.request.contextPath}'+'/user/add',
                    type:"POST",
                    data:$("#frm").serialize(),
                    success:function(msg){
                        alert(msg);//success 或failed
                        $("#msg").show("slow");
                        setTimeout("$('#msg').hide();location.href='${pageContext.request.contextPath}'+'/user/list'",3000);
                    },
                    error:function(){
                        $("#msg").show("slow");
                    }

                });
                return false;
            })
        })

    </script>
</head>
<body>
<!--成功的提示框  -->
<div id="msg" style="width: 60%; margin: 0px auto; margin-top: 10px;display:none;" >
    <div class="alert alert-warning alert-dismissible paz" role="alert"  data-dismiss="alert" >
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>提示!</strong> 添加 成功！！！
    </div>
</div>
<div style="width: 80%; margin: 0px auto; margin-top: 10px;">
<%--    一、同步请求--%>
<%--    <form class="form-horizontal"  method="post" id="frm" action="add">--%>
     <form class="form-horizontal"  method="post" id="frm" >
        <!-- ${pageContext.request.contextPath}/user/add -->
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名：</label>
            <div class="col-sm-10">
                <input type="text" name="username" class="form-control"
                       id="username" value="kate" placeholder="用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="birthday" class="col-sm-2 control-label">生日：</label>
            <div class="col-sm-10">
                <input type="date" name="birthday" class="form-control"
                       id="birthday" placeholder="你的生日">
            </div>
        </div>

        <div class="form-group">
            <label for="sex" class="col-sm-2 control-label">性别：</label>
            <div class="col-sm-10">
                <div class="radio">
                    <label> <input type="radio" name="sex" value="男"
                                   checked="checked" />男
                    </label> <label> <input type="radio" name="sex" value="女" />女
                </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="address" class="col-sm-2 control-label">住址：</label>
            <div class="col-sm-10">
                <input type="text" name="address" class="form-control" value="马栏山马兰坡"
                       id="address" placeholder="填写你的住址">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">添加</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
